<template>
  <div>
    <p class="title"><i class="el-icon-tickets"></i>最新10条等待处理订单</p>
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column type="index">
      </el-table-column>
      <el-table-column sortable prop="odd" label="订单号">
      </el-table-column>
      <el-table-column prop="name" label="收货人">
      </el-table-column>
      <el-table-column prop="status" label="订单状态" width="130">
      </el-table-column>
      <el-table-column prop="amount" label="金额">
      </el-table-column>
      <el-table-column prop="date" label="下单时间" sortable
        :filters="[{ text: '2018-01-01', value: '2018-01-01' }, { text: '2018-01-02', value: '2018-01-02' }, { text: '2018-01-03', value: '2018-01-03' }, { text: '2018-01-04', value: '2018-01-04' }, { text: '2018-01-05', value: '2018-01-05' }]"
        :filter-method="filterHandler">
      </el-table-column>
      <el-table-column prop="tag" label="订单分类" width="150"
        :filters="[{ text: '虚拟', value: '虚拟' }, { text: '实物', value: '实物' }]" :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag :type="scope.row.tag === '虚拟' ? 'primary' : 'success'" disable-transitions>{{ scope.row.tag }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "maintable",
  data() {
    return {
      tableData: [{
        odd: "201801012345601",
        name: "王小虎",
        status: "已付款",
        amount: "580元",
        date: "2018-01-01",
        tag: "虚拟"
        // }, {
        //   odd: "201801012345602",
        //   name: "王小虎",
        //   status: "已付款",
        //   amount: "130元",
        //   date: "2018-01-02",
        //   tag: "实物"
        // }, {
        //   odd: "201801012345603",
        //   name: "王小虎",
        //   status: "已付款",
        //   amount: "680元",
        //   date: "2018-01-03",
        //   tag: "虚拟"
        // }, {
        //   odd: "201801012345604",
        //   name: "王小虎",
        //   status: "已付款",
        //   amount: "190元",
        //   date: "2018-01-03",
        //   tag: "虚拟"
        // }, {
        //   odd: "201801012345605",
        //   name: "王小虎",
        //   status: "已付款",
        //   amount: "170元",
        //   date: "2018-01-04",
        //   tag: "实物"
        // }, {
        //   odd: "201801012345606",
        //   name: "王小虎",
        //   status: "已付款",
        //   amount: "670元",
        //   date: "2018-01-04",
        //   tag: "虚拟"
        // }, {
        //   odd: "201801012345607",
        //   name: "王小虎",
        //   status: "已付款",
        //   amount: "1780元",
        //   date: "2018-01-04",
        //   tag: "实物"
        // }, {
        //   odd: "201801012345608",
        //   name: "王小虎",
        //   status: "已付款",
        //   amount: "3180元",
        //   date: "2018-01-04",
        //   tag: "虚拟"
        // }, {
        //   odd: "201801012345609",
        //   name: "王小虎",
        //   status: "已付款",
        //   amount: "780元",
        //   date: "2018-01-05",
        //   tag: "实物"
        // }, {
        //   odd: "201801012345610",
        //   name: "王小虎",
        //   status: "已付款",
        //   amount: "2130元",
        //   date: "2018-01-05",
        //   tag: "虚拟"
      }]
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
      this.$message({
        showClose: true,
        message: index,
        row,
        type: "success"
      })
    },
    handleDelete(index, row) {
      console.log(index, row)
      this.$message({
        showClose: true,
        message: index,
        row,
        type: "success"
      })
    },
    formatter(row, column) {
      return row.address
    },
    filterTag(value, row) {
      return row.tag === value
    },
    filterHandler(value, row, column) {
      const property = column["property"]
      return row[property] === value
    }
  }
}
</script>

<style scoped></style>
